<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件管理</title>
</head>

<body>
  <div id="app">
    <div>{{title}}</div>
    <!-- 查询的表单 -->
    <div>
      类型:
      <!-- {{queryinfo}} -->
      <select v-model="queryinfo.contentType">
        <option v-for="d in types" :value="d.value">
          {{d.text}}
        </option>
      </select>
      <!-- <input type="text" v-model="queryinfo.contentType"> -->
      描述: <input type="text" v-model="queryinfo.fileinfo">
      名称: <input type="text" v-model="queryinfo.filename">
      <button @click="page.pageNumber=1;query();">查询</button>
    </div>

    <!-- 
      作业：通过filter转换文件大小显示为kb/mb/gb
    -->

    <div v-if="!loading">
      <button @click="browseFile">文件选择...</button>
      <span v-if="selectedFile">
        {{selectedFile.name}}
        ==
        {{selectedFile.type}}
        ==
        {{selectedFile.size}}
      </span>
      <input type="text" v-model="fileinfo">
      <button :disabled="!selectedFile" @click="uploadFile">上传</button>

      <span v-if="imgdata.length>0">
        <img style="width: 5rem;" :src="imgdata" alt="">
      </span>
    </div>

    <div v-if="loading">
      文件上传中，请稍候。。。
    </div>

    <div>
      <table>

        <thead>

          <tr>
            <th>文件名</th>
            <th>文件类型</th>
            <th>文件大小</th>
            <th>文件描述</th>
            <th>上传时间</th>
            <th>操作</th>
          </tr>

        </thead>
        <tbody>
          <tr v-for="d in list">
            <td>{{d.filename}}</td>
            <td>{{d.contentType}}</td>
            <td>{{d.fileSize}}</td>
            <td>{{d.fileinfo}}</td>
            <td>{{d.lastupdate | formatDate}}</td>
            <td>
              <button @click="copyLink(d)">复制地址</button>
              <button @click="download(d)">下载</button>
              <button @click="del(d)">删除</button>
              <button v-if="isImg(d)" @click="showImg(d)">
                预览
              </button>
            </td>
          </tr>
        </tbody>

      </table>

      <!-- {{list}} -->
      <br>
      {{page}}

      <span v-if="preimg.length>0">
        <img style="width: 15rem;" :src="preimg" alt="">
      </span>

    </div>



  </div>

  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../lib/vue.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/myfilters.js"></script>

  <script src="js/file.js"></script>
</body>

</html>